<template>
	<!-- 外面最大的div -->
	<view class="sideBox">
		<view class="center">
			<!-- header -->
			<view class="header">
				<text class="txt1">发布失物招领</text>
				<!-- <navigator class="issBox"> -->
				<text class="issBox" @click="issue">发布</text>	
				<!-- </navigator> -->
			</view>
			<!-- 发布内容和图片部分 -->
			<view class="section">
				<view class="title">
					 <input @blur="bindTextAreaBlur2" type="text" placeholder="输入标题..." />		
				</view>
				<view class="content">
					<textarea @blur="bindTextAreaBlur" auto-height  placeholder="输入内容..."/>
				</view>
				<!-- 图片上传 -->
				<view class="imgUpload">
					<!-- <text>+</text> -->
					<uni-file-picker 
					    v-model="imageValue" 
					    fileMediatype="image" 
					    mode="grid" 
						ref="files" 
						:auto-upload="true"
					    @select="select" 
					    @progress="progress" 
					    @success="success" 
					    @fail="fail" 
					/>
				</view>
				
			</view>
		</view>
		
		<!-- 发布成功时弹出发布成功的弹框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog  mode="base" type="success" 
			message="成功消息" content="发布成功啦!" :duration="2000" :before-close="true" @close="close" @confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>

// 获取当前时间
	function getTime(){
		var date = new Date();
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var day = date.getDate();
		var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
		var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
		var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
		month >= 1 && month <= 9 ? (month = "0" + month) : "";
		day >= 0 && day <= 9 ? (day = "0" + day) : "";
		var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
		return timer;
	};
export default {
	
	data() {
		return {
			imgs:'',
			imgs_url:'',
			imageValue:[],
			create_time:'',
			last_found_title:'',
			last_found_withtitle:'',
			wx_user_id:1,
			getTime: getTime()
		}
	},
	methods: {
		// 图片上传
		// 获取上传状态
		select(e){
			console.log('选择文件：',e)
			this.imgs= e.tempFilePaths.toString();
			// for(let i = 0; i < )
			uni.uploadFile({
				url:'http://172.17.26.211:3313/uploadFile',
				name:'file',
				filePath:this.imgs,
			}).then ((res) => {
				let url = JSON.parse(res[1].data);
				this.imgs_url = url.data;
				console.log(this.imgs_url);
			})
		},
		// 获取上传进度
		progress(e){
			console.log('上传进度：',e)
		},
		// 上传成功
		success(e){
			console.log(e);
			console.log('上传成功');
			
		},

		// 上传失败
		fail(e){
			console.log('上传失败：',e)
		},
					
		bindTextAreaBlur: function (e) {
			console.log(e.detail.value);
			this.last_found_withtitle = e.detail.value;
		},
		bindTextAreaBlur2: function (e) {
			console.log(e.detail.value);
			this.last_found_title = e.detail.value;
		},
		
		// 弹框弹出
		close() {
			// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
			// ...
			this.$refs.popup.close()
		},
		confirm(value) {
			// 输入框的值
			console.log(value)
			// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
			// ...
			this.$refs.popup.close()
		},
		
		// open() {
		//             this.$refs.popup.open()
		//         },
		
		// 点击发布按钮
		issue(){
			   // this.$refs.ReRegister.open();
			// console.log(this.getTime);
			this.$http({
				url:'/lastfound/addLastFound',
				data:{
					wx_user_id: this.wx_user_id,
					create_time: this.getTime,
					imgs_url: this.imgs_url,
					last_found_title: this.last_found_title,
					last_found_withtitle: this.last_found_withtitle
				}
			}).then(res => {
				if(res.data.code == 200){
					// 成功时弹出发布成功的弹框
					this.$refs.popup.open();
					uni.redirectTo({
						url:'../lost/lost'
					});
					
				};
				
				// console.log(res);
			});
			
		}
		
		
	}
}
</script>

<style lang="less" scoped>
.sideBox {
	width: 750rpx;
	.center {
		width: 690rpx;
		margin: 0 auto;
		.header {	
			display: flex;
			justify-content: space-between;
			padding-top: 60rpx;
			height: 122rpx;
			.txt1 {
				font-size: 44rpx;
				font-weight: 600;
			}
			.issBox {
				width: 130rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				background-color: #f9cc66;
				text-align: center;
				
			}
			
		}
		.section {
			.title {
				input {
					font-size: 40rpx;
				}
			}
			.content {
				padding-top: 98rpx;
				textarea {
					font-size: 26rpx;
				}
			}
			.imgUpload {
				margin-top: 180rpx;
			}
		}
		.dialog {
			width: 250rpx;
			height: 200rpx;
			background-color: #fff;
			box-shadow: 0 0 12rpx 2rpx #00000020;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
